<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul,
        ol,
        li {
            list-style: none;
        }

        .wrapper {
            width: 800px;
            /* height: 600px; */
            border: 1px solid black;
            margin: 30px auto;
            display: flex;
            flex-direction: column;
            /* justify-content: center; */
            align-items: center;
            padding: 5px;
        }

        #box {
            width: 100%;
            height: 400px;
            margin-bottom: 5px;
        }

        ul {
            width: 100%;
            /* height: 100px; */
            display: flex;
        }

        ul>li {
            flex-grow: 1;
            border: 1px solid black;
            margin: 1px;
        }

        li img {
            width: 100%;
        }

        #btn1,
        #btn2 {
            width: 100%;
            height: 50px;
            margin-top: 5px;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <!-- <div id="box" style="background:url(./imgs/1.webp) 0% 0% / 100% 100% no-repeat;"></div> -->
        <div id="box"></div>
        <ul id="ul">
            <!-- <li><a><img src="./imgs/1.webp" alt=""></a></li>
            <li><a><img src="./imgs/2.webp" alt=""></a></li>
            <li><a><img src="./imgs/3.webp" alt=""></a></li>
            <li><a><img src="./imgs/4.webp" alt=""></a></li> -->
        </ul>
        <button id="btn1">更换背景</button>
        <button id="btn2">随机抽取女朋友</button>
    </div>

    <script>
        var arr = [
            "./imgs/1.webp",
            "./imgs/2.webp",
            "./imgs/3.webp",
            "./imgs/4.webp",
        ]

        var arr2 = [
            "./imgs/11.webp",
            "./imgs/12.webp",
            "./imgs/13.webp",
            "./imgs/14.webp",
        ]

        /* 动态添加缩略图li */
        function renderThumbnail() {
            // 创建文档碎片（集成DOM元素的缓冲区）
            // var fragment = document.createDocumentFragment()
            // arr.forEach(
            //     function(item){
            //         var li = document.createElement("li")
            //         var a = document.createElement("a")
            //         var img = document.createElement("img")
            //         img.src = item

            //         a.appendChild(img)
            //         li.appendChild(a)

            //         // 4次将li丢入页面中的ul=4次真实的DOM渲染=4次重绘整个页面=性能一坨翔
            //         // ul.appendChild(li)

            //         // 将li元素追加到文档碎片（这个缓冲区）
            //         fragment.appendChild(li)
            //     }
            // )

            // // 一次性地将缓冲区中的内容加入页面中的ul=4次DOM渲染合成了1次=性能节约了3/4
            // ul.appendChild(fragment)

            /* 更佳方案：直接攒HTML字符串 */
            str = ""
            arr.forEach(
                function (item) {
                    var li = `<li><a><img src="${item}" alt=""></a></li>`

                    // 4次将li丢入页面中的ul=4次真实的DOM渲染=4次重绘整个页面=性能一坨翔
                    // ul.innerHTML += li

                    // 将字符串拼接好                
                    str += li
                }
            )

            // 将拼接好的str一次性地渲染到ul
            ul.innerHTML = str
        }

        /* 更换背景图 */
        var currentBgIndex = 0
        function setBgimg(index, imgs = arr) {
            box.style.background = `url(${imgs[index]}) 0% 0% / 100% 100% no-repeat`
            // 记录当前的实时背景图序号
            currentBgIndex = index
        }

        /* 随机切换一张大图 */
        function switchRandomImg(imgs = arr) {
            var rand = parseInt(imgs.length * Math.random())
            console.log("rand", rand);

            // 一直生成直到与当前正在显示的大图序号不重复为止
            while (rand === currentBgIndex) {
                rand = parseInt(imgs.length * Math.random())
            }


            // 将背景图切换为arr中的对应序号的图片
            // box.style.background = `url(${arr[rand]}) 0% 0% / 100% 100% no-repeat`
            setBgimg(rand, imgs)
        }

        var box = document.getElementById("box")
        var ul = document.querySelector("#ul")

        renderThumbnail()

        /* 默认显示第一张图片 */
        // box.style.background = `url(${arr[0]}) 0% 0% / 100% 100% no-repeat`
        setBgimg(currentBgIndex)

        /* 点击缩略图切换大图 */
        var lis = document.querySelectorAll("ul>li")
        // 遍历所有的li
        lis.forEach(
            function (li, index) {
                // 给每个li增加点击事件
                li.onclick = function (e) {
                    console.log("送你离开千里之外", index);

                    // 将背景图切换为arr中的对应序号的图片
                    // box.style.background = `url(${arr[index]}) 0% 0% / 100% 100% no-repeat`
                    setBgimg(index)
                }
            }
        )

        /* 点击更换背景 生成随机序号 */
        document.querySelector("#btn1").onclick = function () {
            switchRandomImg()
        }

        /* 点击更换背景 生成随机序号 */
        var timer = null;
        document.querySelector("#btn2").onclick = function () {
            if (!timer) {
                switchRandomImg()
                timer = setInterval(
                    function () {
                        switchRandomImg()
                    },
                    0.5 * 1000
                )
                btn2.innerText = "点击停止：随机女友抱回家"
            } else {
                clearInterval(timer)
                timer = null
                btn2.innerText = "随机抽取女朋友"

                switchRandomImg(arr2)
            }

        }

    </script>

</body>

</html>